<template>
	<div>
		<headers @back-click="back()" v-bind:headers="headers"></headers>
		<scroll @pullingDown="pullDownRefresh" @pullingUp="pullUpLoad" ref="person" style="margin-top:-1px">
			<div class="content">
				<div class="list">
		            <div class="unit item" @click.stop.prevent="goRepair()">
		                <div class="repair"></div>
		                <span>我要维修</span>
		            </div>
		            <div class="unit item" @click.stop.prevent="goExchangeGoods()">
		                <div class="change"></div>
		                <span>我要换货</span>
		            </div>
		            <div class="unit item" @click.stop.prevent="goReturnGoods()">
		                <div class="return"></div>
		                <span>我要退货</span>
		            </div>
		            <div class="unit item" @click.stop.prevent="goAfterSale()">
		                <div class="note"></div>
		                <span>售后申请记录</span>
		            </div>
		            <div class="unit item" @click.stop.prevent="goService()">
		                <div class="service"></div>
		                <span>在线客服</span>
		            </div>
		        </div>
		    </div>
	    </scroll>
	    <div class="footer">
	        <span style="color: #999">客服电话：</span>
	        <span style="color: #69AFFF;;">0571-88020332</span>
	    </div>
	</div>
</template>
<style lang="less" scoped>
	.content {
		position: relative;
		top: 44px;
		left: 0;
		& .list {
			position: relative;
		    padding: 12px 0;
		    &:last-child {
			    margin-bottom: 0;
			}
			& .item {
			    border: none;
			    height: 1.3333rem;
			    box-sizing: border-box;
			    border-bottom: 0.5px solid #eee;
			    margin: 0;
			}
			& .unit {
				& .repair {
				    float: left;
				    display: inline-block;
				    width: 18px;
				    height: 18px;
				    background: url('../../assets/img/recycle/set_repair@3x.png');
				    background-size: contain;
				}
				& .change {
				    float: left;
				    display: inline-block;
				    width: 18px;
				    height: 18px;
				    background: url('../../assets/img/recycle/set_change@3x.png');
				    background-size: contain;
				}
				& .return {
				    float: left;
				    display: inline-block;
				    width: 18px;
				    height: 18px;
				    background: url('../../assets/img/recycle/set_returns@3x.png');
				    background-size: contain;
				}
				& .note {
				    float: left;
				    display: inline-block;
				    width: 18px;
				    height: 18px;
				    background: url('../../assets/img/recycle/set_record@3x.png');
				    background-size: contain;
				}
				& .service {
				    float: left;
				    display: inline-block;
				    width: 18px;
				    height: 18px;
				    background: url('../../assets/img/recycle/set_service@3x.png');
				    background-size: contain;
				}
				& span {
				    float: left;
				    padding-left: 12px;
				    font-size: 14px;
				    color: #333;
				}
			}
		}
		& .item {
		    border-color: #ddd;
		    background-color: #fff;
		    color: #444;
		    position: relative;
		    z-index: 2;
		    display: block;
		    margin: -1px;
		    padding: 16px;
		    border-width: 1px;
		    border-style: solid;
		    font-size: 16px;
		}
	}
	.footer {
	    position: fixed;
	    width: 100%;
	    text-align: center;
	    line-height: 62px;
	    font-size: 14px;
	    left: 0;
	    bottom: 0;
	    height: 62px;
	    z-index: 3;
	}

</style>
<script>
	export default {
		components: {
        },
        data() {
        	return {
	        	headers:{
	                title:'售后维权',
	                skip:'',
	            },
	        }
        },
        methods: {
            back(){
                this.$router.go(-1)
            },
            goRepair(){
            	this.$router.push({name: "repairList"})
            },
            goExchangeGoods(){
            	this.$router.push({name: 'exchangeGoods'})
            },
            goReturnGoods(){
            	this.$router.push({name: 'returnGoodsApply'})
            },
            goAfterSale(){
            	this.$router.push({name: "afterSale"});
            },
            goService(){
            	this.$router.push({path: '/Cservice'})
            },

            pullDownRefresh() {
            	this.$refs.person.forceUpdate();
            	return;
            },
            pullUpLoad(){
            	this.$refs.person.forceUpdate();
            	return;
            }
        },
        
	}
</script>